<template>
	<view class="dj" v-if="!isRule">
		<view class="name">
			<view class="l">
				我的道具卡
				<image class="xx" src="@/static/images/newhone/djxx.png"> </image>
			</view>
			<view class="r" @click="isRule = true">
				<image class="wt" src="../../../static/images/newhone/djwt.png" mode=""></image>
				使用规则
			</view>
		</view>
		<view class="tabs">
			<view class="tab active">
				未使用(0)
			</view>
			<view class="tab">
				不使用(0)
			</view>
		</view>
		<view class="list">
			<image class="empty" src="@/static/images/newhone/dj0.png"></image>
		</view>
		<view class="tips">
			<view class="request">如何获取道具卡？</view>
			<view>参与平台活动有机会获取道具卡</view>
			<view>道具卡加持，更有机会获取心仪款哦~</view>
		</view>
	</view>
	<view class="dj" v-else>
		<view class="name">
			<view class="l">
				道具卡说明
				<image class="xx" src="@/static/images/newhone/djxx.png"> </image>
			</view>
		</view>
		<view class="content">
			<view class="req">重抽卡规则</view>
			<view class="ans">
				<text>1.在开盒获得商品的结果页点击[我要重抽)按钮可使用重抽卡，离开页面后无法使用。</text>
				<text>2.使用重抽卡时可选择部分或全部商品进行重抽，原抽中商品将立即作废并重新开盒。</text>
				<text>3.1次开盒中，每10连可使用1张重抽卡。</text>
				<text>4.每张重抽卡仅能使用1次，使用后将被扣除。</text>
				<text>5请在有效期内使用，重抽卡过期自动失效。</text>
			</view>
			<view class="req" style="margin-top: 30rpx;">进度卡规则</view>
			<view class="ans">
				<text>1.仅限盲盒详情页使用进度卡。</text>
				<text>2.使用1张进度卡后当前盲盒的保底进度将增加1次。</text>
				<text>3.增加的进度在保底生效时间内有效，到达失效时间但未完成本轮保底，进度将回退。</text>
				<text>4.每张进度卡仅能使用1次，使用后将被扣除。</text>
				<text>5.请在有效期内使用，进度卡过期白动失效。</text>
			</view>

		</view>
		<view class="iKnow" @click="isRule = false">我知道了</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isRule: false
			}
		}
	}
</script>
<style>
	.u-drawer-content {}
</style>
<style scoped lang="scss">
	.dj {
		width: 80vw;
		height: 62vh;
		padding: 20rpx 20rpx 40rpx;
		box-sizing: border-box;
		background: url('@/static/images/newhone/djbj.png') no-repeat;
		background-size: 100% 100%;
		position: relative;
		margin: auto;

		.name {
			display: flex;
			align-items: center;
			font-size: 40rpx;
			font-weight: 600;
			padding: 60rpx 20rpx 40rpx;
			box-sizing: border-box;

			.l {
				flex: 2;
				width: 50%;
				font-style: italic;

				.xx {
					width: 75rpx;
					height: 35rpx;
					margin-left: 20rpx;
				}
			}

			.r {
				flex: 1;
				font-size: 12rpx;
				font-weight: 400;
				display: flex;
				align-items: center;

				.wt {
					width: 24rpx;
					height: 24rpx;
					margin-right: 10rpx;
				}
			}


		}

		.tabs {
			width: 80%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin: auto;

			.tab {
				color: #999;
			}

			.tab.active {
				color: #000;
				position: relative;

				&::after {
					width: 100%;
					height: 20rpx;
					content: '';
					position: absolute;
					left: 0;
					bottom: -5rpx;
					background-image: url('@/static/images/newhone/djtab.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;
				}
			}
		}

		.list {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.empty {
				width: 255rpx;
				height: 255rpx;
				margin: 100rpx 0;
			}
		}

		.tips {
			.request {
				font-weight: 600;
				text-align: center;
				color: #000;
				font-size: 28rpx;
				margin-bottom: 10rpx;
			}

			view {
				color: #999;
				font-size: 12rpx;
				text-align: center;
			}

		}

		.req {
			font-weight: 600;
			margin-bottom: 10rpx;
		}

		.ans {
			font-size: 12rpx;

			text {
				display: block;
			}
		}

		.iKnow {
			width: 300rpx;
			height: 80rpx;
			border-radius: 5rpx;
			font-size: 32rpx;
			background-color: #00dad9;
			line-height: 80rpx;
			text-align: center;
			margin: -0rpx auto;
			z-index: 999;
			position: relative;
			box-shadow: 0 0 100rpx 30rpx rgba(255, 255, 255, .5);
		}
	}
</style>
